<template>
	<view>
		<view class="Warpper" v-if="pageData.length">
			<u-navbar
				title="邀请函"
				@rightClick="rightClick"
				:autoBack="true"
				placeholder
				:titleStyle="titleStyle">
			</u-navbar>

			<view class="Banner">
				<view class="banImg">
					<image
						:src="$imgUrls(this.pageData[this.current].preview)"
						mode="aspectFit"></image>
					<!-- <text class="toName">{{ to }}</text>
					<text class="formName">{{ from }}</text> -->
				</view>
			</view>
			<view class="Template">
				<text class="black size32">选择模版</text>
				<scroll-view scroll-x="true" class="rows nowrap scrollView">
					<view
						class="list"
						v-for="(item, index) in pageData"
						:key="index"
						:class="{ Active: current == index }"
						@click="selceTemplate(index)">
						<image :src="$imgUrls(item.preview)" mode="widthFix" class="wh"></image>
					</view>
				</scroll-view>
			</view>

			<view class="footer">
				<view class="footerBox">
					<view class="btns Edit" @click="editWriter">编辑文案</view>
					<view class="btns generate" @click="ShareImg">生成邀请函</view>
				</view>
			</view>
			<!-- 	<canvas canvas-id="shareCanvas" :style="canvasStyle"> </canvas> -->
		</view>

		<!-- <view class="PopView" v-if="sharePicture">
			<image
				:src="$imgUrls(this.pageData[this.current].preview)"
				mode="widthFix"
				class="PopImg"></image>
			<view class="foot">
				<view class="fotBox">
					<view class="liss" @click="ShareImg">
						<view class="endie">
							<view class="iconfont icon-a-1"></view>
						</view>
						<text class="icon_text">发送给朋友</text>
					</view>
					<view class="liss" @click="Collect">
						<view class="endie">
							<view class="iconfont icon-shoucang"></view>
						</view>
						<text class="icon_text">收藏</text>
					</view>
					<view class="liss" @click="SaveImg">
						<view class="endie">
							<view class="iconfont icon-xiazai size60 color_33"></view>
						</view>
						<text class="icon_text">保存到相册</text>
					</view>
				</view>

				<view class="Cancel" @click.stop="sharePicture = false">取消</view>
			</view>
		</view> -->

		<u-popup
			:show="show"
			@close="show = false"
			:round="10"
			:closeOnClickOverlay="false"
			closeable
			bgColor="#ebebeb">
			<view class="upop">
				<view class="list">
					<text class="name">受邀人</text>
					<input type="text" class="toVal" v-model="to" />
				</view>
				<view class="list">
					<text class="name">邀请人</text>
					<input type="text" class="toVal" v-model="from" />
				</view>

				<view class="fotBtn" @click="subCop">提交文案</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasStyle: 'position:fixed;left:-9999px;',
				titleStyle: {
					fontWeight: 'bold',
				},
				// img: 'https://msraimgcdn.mogoie.com/6142/1735277489859.jpg',
				img: '',
				current: 0,

				order_id: '',
				to: '', //邀请人
				from: '', //受邀人
				pageData: [],
				sharePicture: false,
				show: false,
			};
		},
		onLoad(opt) {
			if (opt.order_id) this.order_id = opt.order_id;
			this.Template();
		},
		methods: {
			Template() {
				this.$http
					.get({
						url: '/SiteApi/getInvitationTemplate',
					})
					.then((res) => {
						if (res.code != 200) return this.$Toast(res.msg);
						const result = res.data || [];
						result.forEach((item) => {
							this.getInvitation(item);
						});
					});
			},
			getInvitation(tpl) {
				this.$showLoading('');
				this.$http
					.get({
						url: '/SiteApi/getInvitation',
						data: {
							tpl,
							lock_order_id: this.order_id,
							to: this.to,
							from: this.from,
						},
					})
					.then((res) => {
						this.$hideLoading();
						if (res.code != 200) return this.$Toast(res.msg);
						const result = res.data;
						result.tpl = tpl;
						if (tpl == 'ch') result.to = '敬启尊客';
						if (tpl == 'en') result.to = 'Dear';
						if (result) this.pageData.push(result);
						// this.img = this.pageData[0].preview;
					});
			},

			subCop() {
				this.$showLoading('');
				const Item = this.pageData[this.current];
				this.$http
					.get({
						url: '/SiteApi/getInvitation',
						data: {
							tpl: Item.tpl,
							lock_order_id: this.order_id,
							to: this.to,
							from: this.from,
						},
					})
					.then((res) => {
						this.$hideLoading();
						if (res.code != 200) return this.$Toast(res.msg);
						const result = res.data;
						result.tpl = Item.tpl;
						this.pageData[this.current].preview = result.preview;
						this.show = false;
					});
			},

			editWriter() {
				this.to = this.pageData[this.current].to;
				this.from = this.pageData[this.current].from;
				this.show = true;
			},

			selceTemplate(index) {
				this.img = this.pageData[index].preview;
				this.current = index;
			},

			SaveImg() {
				uni.downloadFile({
					url: this.pageData[this.current].preview,
					success: (res) => {
						const tempFilePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success: () => {
								this.$Toast('已保存到相册');
							},
							fail: () => {
								this.$Toast('保存失败，请检查相册权限');
							},
						});
					},
				});
			},
			Collect() {
				uni.downloadFile({
					url: this.pageData[this.current].preview,
					success: (res) => {
						const tempFilePath = res.tempFilePath;
						// #ifdef MP-WEIXIN
						wx.addFileToFavorites({
							filePath: tempFilePath,
							success: () => {
								this.$Toast('收藏成功');
							},
							fail: () => {
								this.$Toast('收藏失败');
							},
						});
						// #endif
					},
				});
			},

			ShareImg() {
				uni.downloadFile({
					url: this.pageData[this.current].preview,
					success: (res) => {
						const tempFilePath = res.tempFilePath;
						// #ifdef MP-WEIXIN
						wx.showShareImageMenu({
							path: tempFilePath,
							success: (res) => {
								console.log('分享成功:', res);
							},
							fail: (err) => {
								console.log('分享取消:', err);
							},
						});
						// #endif
					},
				});
			},
		},
	};
</script>
<style lang="scss">
	page {
		background-color: $pages;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}
</style>
<style lang="scss" scoped>
	.Warpper {
		width: 100%;

		display: flex;
		flex-direction: column;
	}
	.Banner {
		width: 100%;
		height: 900rpx;
		background-color: #f8dec7;
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
		overflow: hidden;
		.banImg {
			width: 410rpx;
			position: relative;
			.toName {
				color: #000;
				font-size: 22rpx;
				position: absolute;
				left: 30rpx;
				top: 40%;
			}
			.formName {
				color: #000;
				font-size: 22rpx;
				position: absolute;
				right: 30rpx;
				bottom: 20%;
			}
		}
	}
	.Template {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		.scrollView {
			width: 100%;
			margin-top: 30rpx;
			.list {
				width: 220rpx;
				height: 100%;
				display: inline-block;
				margin-right: 24rpx;
				border: 1px solid #ddd;
				border-radius: 10rpx;
				padding: 0 14rpx;
				position: relative;
				.listImg {
					width: 100%;
					position: relative;
					height: 100%;
				}
			}
			.Active {
				border: 1px solid $color_d85;
			}
		}
	}
	.footer {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #edeaed;
		border-top: 1px solid #ddd;
		.footerBox {
			display: flex;
			padding: 20rpx 0;
			justify-content: space-around;
			.btns {
				width: 330rpx;
				height: 88rpx;
				border: 1px solid $color_d85;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
			}
			.Edit {
				background-color: #fff;
				color: $color_d85;
			}
			.generate {
				background-color: $color_d85;
				color: #fff;
			}
		}
	}

	.content {
		width: 100%;
		position: absolute;
		top: 20%;
		left: 0;
		z-index: 10;
		display: flex;
		flex-direction: column;

		.txtWen {
			color: #333;
			font-size: 20rpx;
			scale: 0.8;
		}
	}

	.upop {
		width: 100%;
		padding: 100rpx 30rpx 200rpx 30rpx;
		.list {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			.name {
				color: #666;
				font-size: 30rpx;
				margin-right: 20rpx;
			}
			.toVal {
				flex: 1;
				height: 80rpx;
				border: 1px solid #ddd;
				background-color: #e5e5e5;
				border-radius: 8rpx;
				padding: 0 20rpx;
				text-align: right;
				font-size: 30rpx;
				color: #000;
			}
		}
		.fotBtn {
			width: 100%;
			height: 84rpx;
			color: #fff;
			font-size: 30rpx;
			background-color: $color_d85;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 60rpx;
		}
	}

	.PopView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
		.PopImg {
			width: 680rpx;
			z-index: 101;
		}
		.foot {
			width: 100%;
			background-color: #dcd9dc;
			border-radius: 10rpx 10rpx 0 0;

			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 2000;
			.fotBox {
				width: 100%;
				display: flex;
				padding: 50rpx 60rpx 0 60rpx;
				align-items: center;
				justify-content: space-around;
				.liss {
					display: flex;
					flex-direction: column;
					align-items: center;
					.endie {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #fff;
						border-radius: 20rpx;
						.icon-a-1 {
							color: #1ab05c;
							font-size: 68rpx;
						}
						.icon-shoucang {
							color: #e64d4d;
							font-size: 60rpx;
						}
					}
					.icon_text {
						color: #666;
						font-size: 20rpx;
						margin-top: 10rpx;
					}
				}
			}
			.Cancel {
				width: 100%;
				height: 100rpx;
				padding: 30rpx 0 100rpx 0;
				margin-top: 50rpx;
				background-color: #edeaed;
				color: #000;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
